
<div class="card">

  <a href="{{ package.url | relative_url }}">
    <img src="{{ package.url | append: package.image | relative_url }}" class="card-img-top" alt="{{ .Title | htmlEscape }}">
  </a>

  <div class="card-body">
    <h5 class="card-title">{{ package.name | escape }}</h5>
    <p class="card-text" markdown="1">
      {{ package.description }}
    </p>
  </div>

  <div class="card-body d-flex pt-0">
    <dl class="align-self-end mb-0">
      <dt>Contains:</dt>
      <dd>
        {%- for project in package.projects -%}

        {%- unless forloop.first %}, {% endunless -%}

        {% assign p = site.data.projects[project] %}
        <a target="_blank" href="{{ p.projectUrl }}" title="{{ p.fullName | escape }}">{{ p.shortName | escape -}}</a>

        {%- endfor %}
      </dd>
    </dl>
  </div>

  <div class="card-footer text-right">
    <a href="{{ package.url | relative_url }}" class="card-link">Get Started!</a>
  </div>
</div>
